<template>
	<view class="content" :style="{background:'#F7F7F7;'}">
		<view class="top-tab-list" :style="{background:'#FFFFFF;'}">
			<block v-for="(item, index) in top_tab_list" :key="index">
				<view class="item" @click="changeTabId(item.id)">
					<text class="font30" :class="tab_list_id == item.id?'fontw':''" :style="{color:tab_list_id==item.id?'#E9564F;':'#111111;'}">{{item.name}}</text>
					<view class="tab-bottom-line" v-if="tab_list_id == item.id"></view>
				</view>
			</block>
		</view>
		<view class="list-center" :style="{background:'#FFFFFF;'}">
			<block v-for="(item, index) in order_list" :key="index">
				<view class="item">
					<view class="item-left">
						<text class="font30 text1" :style="{color:'#111111;'}">{{item.goods.name}}*{{item.goods.num}}</text>
						<!-- <text class="font30 text1" v-else :style="{color:'#111111;'}">{{item.name}}</text> -->
						<text class="font24" :style="{color:'#AEAEAE;'}">{{item.open_time}}</text>
					</view>
					<view class="item-right">
						<view class="left-css" v-if="item.type == 1">
							<view class="copy-btn" :style="{color:'#E9564F;'}" @click="copyCode(item.code)">
								<text class="font30">复制</text>
							</view>
							<image @click="openPopup(item.prizedraw_id)" class="help-icon" src="../../../static/help-order-icon.png" mode=""></image>
						</view>
						<text class="font28" v-if="item.type == 3" :style="{color:'#AEAEAE;'}">拼手气红包</text>
						<text class="font28" v-if="item.type == 2" :style="{color:'#E9564F;'}">普通红包</text>
					</view>
				</view>
			</block>
		</view>
		<uni-popup ref="keyStartPopup" type="center" :maskClick="false">
			<view class="publicpopup">
				<image class="closeAssistant" @click="$refs.keyStartPopup.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<image class="bgimgpublic" style="z-index: 0;" src="../../../static/luttery-start-bgimg.png" mode="widthFix"></image>
				<view class="start-luttery-index">
					<text class="start-top-text font36 fontw" :style="'color:#E9564F;'">奖品码使用方法</text>
					<view class="get-opportunity">
						<text class="font30" :style="'color:#7c7c7c;'">联系活动发起人或者在详情内查看使用方法~</text>
					</view>
					<image class="use-cion" src="../../../static/use-function.png" mode=""></image>
					<view class="notice-btn-list">
						<view class="btn-item1 btn-item-margin" @click="startJoinLuttery">
							<image class="btn-item1-css" src="../../../static/small-btn.png" mode=""></image>
							<text class="btn-text font34" :style="'color:#FFFFFF;'">去添加</text>
						</view>
						<view class="btn-item1" :style="'border: 2rpx solid #E9564F;'" @click="startJoinLuttery">
							<text class="btn-text font34" :style="'color:#E9564F;'">去查看</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var util = require('@/js/util.js')
	export default {
		data() {
			return {
				tab_list_id:0,
				top_tab_list:[
					{
						id:0,
						name:'进行中'
					},
					{
						id:1,
						name:'未开始'
					},
					{
						id:2,
						name:'已结束'
					}
				],
				order_list:[],
				luttery_id:''
			}
		},
		onShow() {
			this.getOrderList()
		},
		methods: {
			openPopup(id){
				this.luttery_id = id
				this.$refs.keyStartPopup.open()
			},
			startJoinLuttery(){
				uni.navigateTo({
					url:'../luttery/lutteryInfo?id='+this.luttery_id
				})
			},
			copyCode(code){
				uni.setClipboardData({
				    data: code,
				    success: function () {
				        console.log('success');
						uni.showToast({
							title:"奖品码复制成功",
							icon:'none',
							duration:3000
						})
				    }
				});
			},
			goToAllQuesiton(){
				uni.navigateTo({
					url:'myCommonProblem'
				})
			},
			getOrderList(){
				let _self = this
				uni.request({
					url: util.getUrl("prizedraw/joinLog"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						status:_self.tab_list_id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.order_list = res.data.data
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					},
				});
			},
			changeTabId(id){
				this.tab_list_id = id
				this.getOrderList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.start-luttery-index{
		width: 100%;
		z-index: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 50upx;
		z-index: 1;
		.use-cion{
			width: 630upx;
			height: 287upx;
			z-index: 1;
			margin-bottom: 31upx;
		}
		.input-key{
			width: 630upx;
			height: 80upx;
			text-align: center;
			border-radius: 20upx;
			margin-bottom: 38upx;
		}
		.file-key-image-css{
			width: 149upx;
			height: 266upx;
			margin-bottom: 61upx;
		}
		.get-opportunity-file{
			margin-bottom: 116upx;
		}
		.get-opportunity{
			display: flex;
			align-items: center;
			margin-bottom: 126upx;
			image{
				width: 16upx;
				height: 27upx;
				margin-left: 15upx;
			}
		}
		.start-top-text{
			margin-bottom: 30upx;
		}
		.notice-btn-list{
			display: flex;
			align-items: center;
			margin-bottom: 50upx;
			.btn-item-margin{
				margin-right: 30upx;
				font-weight: 300;
			}
			.btn-item1{
				width: 300upx;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				border-radius: 20upx;
				z-index: 1;
				.btn-item1-css{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 0;
				}
				.btn-text{
					z-index: 1;
				}
			}
		}
	}
	.publicpopup{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 690upx;
		box-sizing: border-box;
		position: relative;
		border-radius: 18upx;
		background: #FFFFFF;
		.popuptopimge{
			width: 361upx;
			height: 208upx;
			position: absolute;
			top: -135upx;
			z-index: 1;
		}
		.bg-height{
			height: 554upx;
		}
		.close-btn{
			z-index: 3;
			right: 75upx !important;
			top: 37upx !important;
		}
		.closeAssistant{
			width: 31upx;
			height: 31upx;
			position: absolute;
			top: 24upx;
			right: 24upx;
			z-index: 3;
		}
		.public-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 410upx;
			height: 80upx;
			position: relative;
			margin-bottom: 40upx;
			.medium-btn-css{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				width: 100%;
				height: 100%;
			}
			.btn-text{
				z-index: 1;
			}
		}
	}
	.item{
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 30upx 0;
		border-bottom: 2upx solid #EBEBEB;
		justify-content: space-between;
		.item-left{
			display: flex;
			flex-direction: column;
			.text1{
				margin-bottom: 19upx;
			}
		}
		.item-right{
			display: flex;
			align-items: center;
			.left-css{
				display: flex;
				align-items: center;
				.copy-btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120upx;
					height: 48upx;
					border-radius: 24upx;
					background-color: rgba(233,86,79,0.2);
					margin-right: 10upx;
				}
				.help-icon{
					width: 34upx;
					height: 34upx;
				}
			}
		}
	}
	.list-center{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 690upx;
		border-radius: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.content{
		width: 750upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		min-height: 100vh;
		padding-top: 30upx;
		box-sizing: border-box;
	}
	.top-tab-list{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 690upx;
		height: 80upx;
		box-sizing: border-box;
		padding-bottom: 30upx;
		padding-top: 25upx;
		border-radius: 20upx;
		margin-bottom: 30upx;
		.item{
			display: flex;
			align-items: center;
			flex-direction: column;
			position: relative;
			.tab-bottom-line{
				position: absolute;
				bottom: 0upx;
				background: #E9564F;
				height: 4upx;
				width: 74upx;
			}
		}
	}
</style>
